<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>News</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="../../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<link type="text/css" rel="stylesheet" href="css/music.css" />
	
	<link type="text/css" rel="stylesheet" href="../../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<link type="text/css" rel="stylesheet" href="../../css/popeWin.css" />
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="../../js/popeScroll.js"></script>
	<script type="text/javascript" src="js/jquery.tabswitch.js"></script>
	<script type="text/javascript" src="../../js/popeWin.js"></script>
	<script type="text/javascript" src="js/cloud-carousel.1.0.5.js"></script>
	<script language="JavaScript" type="text/JavaScript">
		var tabnum = 0;
		var maxtabnum = 3;
		var initRankinglistFlag;
		var winheight;
		var winwidth;
		var divhtml;
		var imgNum = 1;
		var imgMax = 4;
		$(document).ready(function() {
			//window.parent.resizeWin("music1",null,null,720,600);
			$(window).resize(function() {
				refresh();
			});
			refresh();	
			
			divhtml = $("#create_playlist").html();
			$("#create_playlist").empty();
			
			var parwinwidth = $(parent.window).width();
			var parwinheight = $(parent.window).height();
			
			$("#leftButton,#rightButton").hover(function(){
				$(this).removeClass("transparent_0");
				$(this).addClass("transparent_class");
			},function(){
				$(this).removeClass("transparent_class");
				$(this).addClass("transparent_0");
			});
			
			$(".subtab").tabSwitch("create", {type: "slide", height: parwinheight*0.8, width: parwinwidth/2-5},function(){});
			
			$.getJSON("music_getMusicWeekly.do",{num:12},function(json){
				$("#music_weekly").empty();
				for(var i=0;i<json.length;i++){
					var htmlStr = '<div style="width: 23%;float: left;margin: 0 1% 0 1%;">';
					htmlStr+= '<a style="width:100%;margin: 0 0 6px;float: left;">';
					htmlStr+= '<img onclick="showMusic(this)" id="musicweekly_'+ json[i].id +'" class="img_cls" style="width:100%;cursor: pointer;" title="'+ json[i].title +'" src="images/weekly/'+ json[i].imageUrl +'">';
					htmlStr+= '</a>';
					htmlStr+= '<a id="a_'+ json[i].id +'" onclick="showMusic(this)" title="'+ json[i].title +'" style="float: left;width: 80%;height: 16px;line-height: 16px;margin-bottom: 30px;cursor: pointer;font-size: 14px;">'+ json[i].title +'</a>';
					htmlStr+= '</div>';
					$("#music_weekly").append(htmlStr);				
				}
				refresh();
			});
			
			$.getJSON("music_getRankingList.do",{},function(json){
				$("#rankinglist").empty();
				for(var i=0;i<json.length;i++){
					if(json[i].imageUrl!=null){
						var htmlStr = '<img onclick="showMusicByList(this)" id="rankinglist_'+ json[i].id +'" style="cursor: pointer;" class="cloudcarousel" src="images/rankinglist/'+ json[i].imageUrl +'" alt="'+ json[i].listDesc +'" title="'+ json[i].listName +'" />';
						$("#rankinglist").append(htmlStr);		
					}
							
				}
				refresh();
			});
			
			getMyPlaylist();
			
			$("#createPlaylist").toggle(
				function () {
					openPlaylist();
				},
				function () {
					closePlaylist();
			}); 
			
			$("div").disableSelection();
			
		});
		
		function search(){
			$("#search_content").empty();
			$("#search_tip").hide();
			var key = $("#searchInput").val();
			if(key==null||key==""){
				return;
			}
			$.getJSON("music_getMusicByLike.do",{musicLike:key},function(json){
				if(json.length<1){
					$("#search_tip").show();
					$("#search_tip").html("您搜索的资源我们没有找到，我们会尽快为您添加");
					return false;
				}
				var htmlstr = "";
				for(var i=0;i<json.length;i++){
					htmlstr += '<div style="width:100%;height: 6%;margin: 1% 0;float: left;line-height: 6%;" onmouseover="showCp(this);" onmouseout="hideCp(this);">';
					htmlstr += '<div class="song_name" style="width:25%;height: 100%;line-height: 100%;float: left;"><span style="font-size: 16px;">'+ json[i].songName +'</span></div>';
					htmlstr += '<div class="singer_name" style="width:15%;height: 100%;line-height: 100%;float: left;"><span style="font-size: 16px;">'+ json[i].singerName +'</span></div>';
					htmlstr += '<div class="album_name" style="width:30%;height: 100%;line-height: 100%;float: left;"><span style="font-size: 16px;">'+ json[i].albumName +'</span></div>';
					htmlstr += '<div class="music_cp" style="width:15%;height: 100%;float: left;display:none;">';
					htmlstr += '<img id="play_'+json[i].id+'" style="height: 70%;cursor: pointer;" src="images/wmp.png" title="播放" onclick="addToPlay(\''+ json[i].id +'\');" />';
					htmlstr += '<img id="add_'+json[i].id+'" style="height: 70%;cursor: pointer;" src="images/plus.png" title="添加" onclick="showMyPlaylist(this,2);" />';
					htmlstr += '</div>';
					htmlstr += '</div>';
				}	
				$("#search_content").append(htmlstr);
				$("#music_content").popeScroll({
					mousewheelBox:"music_box",
					offset_top:-280,
					top:30
				});
				refresh();
			});
		}
		
		function getMyPlaylist(){
			$.getJSON("music_getMyPlaylist.do",{},function(json){
				$("#myPlaylist").empty();
				for(var i=0;i<json.length;i++){
					var isSys = json[i].isSys;
					var descp = json[i].descp;
					if(descp==null||descp==""){
						descp = "暂无";
					}
					var htmlStr = '<div style="width: 400px;height: 160px;margin: 0 10px 10px 0;float: left;">';
					htmlStr += '<div style="width: 130px;height: 160px;margin: 0 30px 10px 0;float: left;">';
					htmlStr += '<img style="width:130px;height: 130px;margin-bottom: 5px;cursor: pointer;" src="'+json[i].imageUrl+'" title="'+ json[i].name +'" onclick="showMusicByPlaylist(\''+ json[i].id +'\');" />';
					htmlStr += '</div>';
					htmlStr += '<div style="width: 170px;height: 160px;float: left;">';
					htmlStr += '<span style="width: 100%;height: 30px;line-height: 30px;font-size: 16px;float: left;">'+ json[i].name +'</span>';
					if(isSys){
						htmlStr += '<span style="width: 100%;height: 20px;line-height: 20px;font-size: 12px;float: left;">来自：系统创建</span>';
					}else{
						htmlStr += '<span style="width: 100%;height: 20px;line-height: 20px;font-size: 12px;float: left;">来自：用户创建</span>';
					}
					htmlStr += '<span style="width: 100%;height: 20px;line-height: 20px;font-size: 12px;float: left;">创建时间：'+ json[i].createTime +'</span>';
					htmlStr += '<span style="width: 100%;height: 20px;line-height: 20px;font-size: 12px;float: left;">简介：'+ descp +'</span>';
					if(!isSys){
						htmlStr += '<img class="myEdit" id="'+json[i].id+'" style="width:20px;height: 20px;margin-right:5px;cursor: pointer;" src="../../image/cover/system/white/MB_0005_sett_small.png" title="编辑" onclick="myEdit(\''+ json[i].id +'\');" />';
						htmlStr += '<img style="width:20px;height: 20px;margin-right:5px;cursor: pointer;" src="../../image/cover/system/white/MB_0040_skaner-1.png" title="删除" onclick="myDelete(\''+ json[i].id +'\');" />';
					}
					htmlStr += '</div>';
					htmlStr += '</div>';
					$("#myPlaylist").append(htmlStr);							
				}
				refresh();
			});
		}
		
		function showMyPlaylist(obj,type){
			$(".popeWinMini").remove();
			$.getJSON("music_getMyPlaylist.do",{},function(json){
				var htmlStr = '<div style="width:140px;height:160px;background:url(../../image/bg/7.png);padding-left:10px;">';
				htmlStr += '<div style="cursor: pointer;float: left;width: 100%;height: 30px;line-height: 30px;font-size:14px;">添加到我的歌单</div>';
				for(var i=0;i<json.length;i++){
					if(type==1){
						htmlStr += '<div style="cursor: pointer;float: left;width: 100%;height: 20px;line-height: 20px;"><a onclick="addAllToPlaylist(\''+ json[i].id +'\')">'+json[i].name+'</a></div>';
					}else if(type==2){
						var musicId = obj.id.split("_")[1];
						htmlStr += '<div id="'+json[i].id+'" style="cursor: pointer;float: left;width: 100%;height: 20px;line-height: 20px;"><a onclick="addToPlaylist(\''+ json[i].id +'\',\''+ musicId +'\')">'+json[i].name+'</a></div>';
					}
					
				}
				htmlStr += '</div>';
				openPLWin(obj.id,htmlStr);
				
			});
		}
		
		function openPLWin(id,html){
			$.popeWinMini({
				id:id,
				width:150,
				height:160,
				content:html
			});
		}
		function closePLWin(id){
			$.popeWinMiniClose({
				id:id
			});
		}
		
		function addToPlay(musicId){
			$.getJSON("music_getMusicById.do",{id:musicId},function(json){
				window.parent.parent.addToplay(json);
			});
			
		}
		
		function addToPlaylist(playlistId,musicId){
			$.get("music_addPlaylist.do",{playlistId:playlistId,musicId:musicId},function(data){
				if(data=="success"){
					closePLWin("add_"+musicId);
					
				}
			});
		}
		
		function showCp(obj){
			$(obj).children(".music_cp").show();
		}
		
		function hideCp(obj){
			$(obj).children(".music_cp").hide();
		}
		
		function showMusic(obj){
			var id = obj.id.split("_")[1];
			//window.parent.resizeWin("music1",0.5,0.8);
			window.location.href = "showMusic.html?id="+id;
		}
		
		function showMusicByList(obj){
			var id = obj.id.split("_")[1];
			//window.parent.resizeWin("music1",0.5,0.8);
			window.location.href = "showMusicByList.html?id="+id;
		}
		
		function showMusicByPlaylist(id){
			//window.parent.resizeWin("music1",0.5,0.8);
			window.location.href = "showMusicByPlaylist.html?id="+id;
		}
		
		function openPlaylist(){
			$.popeWinMini({
				id:"createPlaylist",
				width:500,
				height:400,
				url:"createPlaylist.html"
			});
			
		}
		function closePlaylist(){
			$.popeWinMiniClose({
				id:"createPlaylist"
			});
			
		}
		
		function myEdit(playlistId){
			$.popeWinMini({
				id:"createPlaylist",
				width:500,
				height:400,
				url:"createPlaylist.html?playlistId="+playlistId
			});
		}
		
		function myDelete(playlistId){
			$.get("music_deletePlaylist.do",{playlistId:playlistId},function(data){
				getMyPlaylist();
			});
		}
		
		function refresh(){
			winheight = $(window).height();
			winwidth = $(window).width();
			
			$("#bodydiv").css("height",winheight);
			$("#music_main").css("height",winheight);
			$(".tab_title").css("height",winheight*0.1);
			$(".tab_title").css("line-height",winheight*0.1+"px");
			$(".tab_list").css("height",winheight*0.9);
			$("#rankinglist").css("height",winheight*0.9-100);
			$("#music_box").css("height",winheight*0.9-40);
			$("#search_content").css("height",winheight*0.7);
			$("#my_music").css("height",winheight*0.9);
			$(".img_cls").css("height",winwidth*0.9*0.23*423/524);
		}
		
		function initRankinglist(){
			initRankinglistFlag = true;
			$("#rankinglist").CloudCarousel({			
				reflHeight: 56,
				reflGap:2,
				buttonLeft: $("#left-but"),
				buttonRight: $("#right-but"),
				altBox: $("#alt-text"),
				titleBox: $("#title-text"),
				yRadius:40,
				xPos: winwidth*0.45,
				yPos: 125,
				speed:0.15,
				mouseWheel:true
			});
		}
		
		function changeTab(num){
			var tmp = tabnum + num;
			if(tmp < 0|| tmp > maxtabnum){
				return;
			}
			tabnum = tmp;
			$(".subtab").tabSwitch("moveTo",{index: tabnum},function(){
				if(tabnum==1){
					if(!initRankinglistFlag){
						initRankinglist();
					}
				}
			});
		}

	</script>
</head>
<body style="background-color=transparent;width:100%;margin-left:0px;margin-top:0px;">
	<div id="bodydiv" style="background:url(../../image/bg/6.png)">
		<div id="music_main" style="width:100%;">
			<div id="tabscontent">
				<div id="tab-1" class="subtab">
					<div class="tab_title">音乐期刊</div>
					<div class="tab_list" id="music_weekly" style="width: 90%;margin: 0 5%;">						
                                           										 					    						
                   	</div>
				</div>
				<div id="tab-2" class="subtab">
					<div class="tab_title">排行榜</div>
					<div class="tab_list" style="width:90%;margin: 0 5%;">  
						<div class="cloud_info" style="width:100%;height:100px;">
							<div style="height: 40px;;line-height: 40px;font-size: 22px;"><span id="title-text"></span></div>
							<div style="height: 60px;font-size: 14px;"><p id="alt-text"></p></div>
						</div> 
						<div id="rankinglist" class="cloud" style="width:100%;overflow:scroll;">             
				            
			            </div>       
			        </div>
			        
				</div>
				<div id="tab-3" class="subtab">
					<div class="tab_title">音乐搜索</div>
					<div class="music_search" id="music_search" style="width:100%;height: 39px;;border-bottom: 1px solid #F7FAFF;">
						<div style="margin: 0 auto;width: 100%;">
							<div style="height: 25px;padding: 6px 4px 0 0;margin-top: 12px;"> 
								<div style="float:left;padding-left:5%;font-size: 14px;">音乐搜索：</div>
								<div style="float:left;"><input type="text" id="searchInput" placeholder="找到好的音乐"></div>
								<div style="float:left;"><img onclick="search();" title="搜索" src="../../image/icon/png-0005.png" style="width:22px;height:22px;cursor:pointer;" /> </div>
							</div>
						</div>
					</div>
					<div id="music_title" style="width:100%;height: 30px;margin-left:5%;">
						<div style="width:120px;;height: 30px;line-height: 30px;margin: 1% 0;float:left;">
							<span style="font-size: 16px;margin-right: 10px;">歌曲搜索结果</span>
						</div>
						<!-- 
						<div style="width:100px;;height: 30px;margin: 1% 1%;float:left;">
							<img style="width:30px;height: 30px;" src="../../image/cover/media/white/MB_0000_WMP.png" title="播放全部" onclick="" />
							<img style="width:30px;height: 30px;" src="../../image/cover/others/white/MB_0019_plus.png" title="添加全部" onclick="" />
						</div>
						 -->
					</div>
					<div id="music_box" style="overflow:hidden;width:95%;float:left;margin-left:5%;">
						<div id="music_content" style="float:left;width:100%;">
							<div id="search_tip" style="width: 90%;line-height:30px;padding-left:1%;padding-top:10px;float: left;font-size: 14px;color: #fff;display: none;"></div>
							<div id="search_content" class="content" style="width: 100%;">
								
							</div>
						</div>
					</div>
				</div>
				<div id="tab-4" class="subtab">
					<div class="tab_title">我的音乐</div>
					<div id="my_music" style="width: 95%;margin-left:5%;">
						<div style="width: 100%;height: 40px;margin-bottom: 10px;">
							<div style="width: 20%;;height: 30px;line-height: 30px;margin-bottom: 10px;font-size: 20px;float: left;"><span>我的音乐</span></div>
							<div style="width: 40%;height: 30px;line-height: 30px;margin-bottom: 10px;font-size: 20px;float: left;">
								<a id="createPlaylist" style="border: 1px solid #ddd;margin: 4px 0 0;padding: 0 10px;border-radius: 3px;box-shadow: 1px 2px 0 #4670d9;font-size: 12px;cursor: pointer;">创建歌单</a>
							</div>
						</div>
						<div id="myPlaylist"style="width: 100%;margin-bottom: 10px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="leftButton" class="leftButton transparent_0" onclick="changeTab(-1);"><img title="上一个" src="images/left.png" /></div>
		<div id="rightButton" class="rightButton transparent_0" onclick="changeTab(1);"><img title="下一个" src="images/right.png" /></div>
		
	</div>
</body>
</html>